<template>
  <div>
    <el-container>
      <el-aside :width="open ? '300px' : '60px'" class="hidden-sm-and-down">
        <div style="width: 300px; height: 100%">
          <AsideLeft></AsideLeft>
          <AsideRight></AsideRight>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <my-header :open="open" @handle-open="handleOpen"></my-header>
        </el-header>
        <el-main>
          <el-scrollbar height="calc(100vh - 90px)">
            <div class="routerView">
              <router-view v-slot="{ Component }">
                <keep-alive :include="tabsbar" :max="99">
                  <component :is="Component" />
                </keep-alive>
              </router-view>
            </div>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>

    <TyFloat>
      <RRWeb />
    </TyFloat>

    <VetContextMenu />
  </div>
</template>

<script lang="ts">
import AsideLeft from "@/components/aside/left.vue";
import AsideRight from "@/components/aside/right.vue";
import MyHeader from "@/components/header/index.vue";
import {
  defineComponent,
  reactive,
  ref,
  defineAsyncComponent,
  toRefs,
  computed,
} from "vue";
import { useStore } from "vuex";

export default defineComponent({
  components: {
    AsideLeft,
    AsideRight,
    MyHeader,
    TyFloat: defineAsyncComponent(
      () => import("@/components/tyFloat/index.vue")
    ),
    RRWeb: defineAsyncComponent(
      () => import("@/components/tyFloat/components/RRWeb.vue")
    ),
    VetContextMenu: defineAsyncComponent(
      () => import("@/vet/vetContextMenu/index2.vue")
    ),
  },
  name: "HomeView",
  setup() {
    const open = ref(true);
    const route = ref({});
    const store = useStore();
    const state = reactive({});
    const handleOpen = () => {
      open.value = !open.value;
    };

    const tabsbar = computed(() => {
      const tabsRouter = store.getters["tabsbar/tabsRouter"];
      const routeName = [] as any;
      tabsRouter.forEach((element: any) => {
        routeName.push(element.name);
      });
      return routeName;
    });

    const handleRoute = (val: any) => {
      route.value = val;
    };
    const handleRoute2 = () => {
      return route.value;
    };

    return {
      ...toRefs(state),
      route,
      open,
      handleOpen,
      handleRoute,
      handleRoute2,
      tabsbar,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-aside {
  overflow: hidden;
  transition-property: width;
  transition-duration: 0.5s;
  border-right: 1px solid $border-color;
}
.el-header {
  height: 100px;
  // line-height: 90px;
  /* box-shadow: 1px 0 2px; */
  // border-bottom: 1px solid $border-color;
  /* z-index: 1998; */
  --el-header-padding: 0;
}
.el-main {
  background: #fafafa;
  box-shadow: 0 0 5px #cdd0d6 inset;
  --el-main-padding: 0;
  overflow: hidden;
}
.routerView {
  padding: 20px;
}
</style>
